<template>
	<view class="h100 flex-col">
		<my-status-bar />
		<view class="p-x-10 p-t-10" style="background: #fff">
			<view class="flex">
				<uni-data-select v-model="ALERT_TYPE" :localdata="localdata1" placeholder="请选择类型" class="m-r-10" />
				<uni-data-select v-model="ALERT_LEVEL" :localdata="localdata2" placeholder="请选择等级" />
			</view>
			<up-tabs :list="[{ name: '待处理' }, { name: '处理中' }, { name: '已处理' }]" :current="current"
				@click="({ index }) => {current = index; $store.user.current = index}" />
		</view>

		<view class="f1 h0 p-y-10">
			<my-scroll class="h100" @scrolltolower="scrolltolower" backTop>
				<template v-for="(item, i) in listData">
					<view class="item" @tap="detailFn(item)">
						<up-text :text="item.告警信息" :lines="1" class="item-p" size="16" color="#333333" />
						<view class="flex s-center m-t-4">
							<view class="f1 w0">
								<template v-for="(item2, i) in list">
									<view class="flex item-p">
										<view class="flex s-center">
											<image :src="getImgUrl(item2.img)" mode="widthFix"
												style="width: 30rpx; height: 32rpx" class="m-r-5" />
											<up-text :text="`${item2.title}：`" color="#525866" size="14" />
										</view>
										<up-text :text="item[item2.key]" :lines="1" color="#7F899F" size="14" />
									</view>
								</template>
							</view>
							<up-tag :text="item.告警级别" plain shape="circle" size="mini" />
						</view>
					</view>
				</template>
			</my-scroll>
		</view>
	</view>
</template>

<script setup>
	import {
		getByApiCode
	} from '@/api/customApi';

	const current = ref(uni.$store.user.current),
		list = computed(() => {
			let data = [{
					title: '类型',
					img: 'msg/lx.png',
					key: '类型'
				},
				{
					title: '区域',
					img: 'msg/qy.png',
					key: '区域'
				},
				{
					title: '归属部门',
					img: 'msg/bm.png',
					key: '归属部门'
				},
				{
					title: '发生时间',
					img: 'msg/sj.png',
					key: '告警开始时间'
				}
			];
			if (current.value == 2) {
				data.push(
					...[{
							title: '处理人',
							img: 'msg/clr.png',
							key: '处理人'
						},
						{
							title: '处理时间',
							img: 'msg/clsj.png',
							key: '处理时间'
						}
					]
				);
				return data;
			}
			return data;
		});


	onShow(() => {
		if (current.value !== uni.$store.user.current)
			current.value = uni.$store.user.current;
	})

	/********************************************告警数据*************************************/
	const ALERT_TYPE = ref(''),
		localdata1 = [{
				value: '边坡GNSS',
				text: '边坡GNSS'
			},
			{
				value: '边坡测斜仪',
				text: '边坡测斜仪'
			},
			{
				value: '边坡雷达',
				text: '边坡雷达'
			},
			{
				value: '水害',
				text: '水害'
			},
			{
				value: '火灾',
				text: '火灾'
			},
			{
				value: '粉尘',
				text: '粉尘'
			},
			{
				value: '有人车辆',
				text: '有人车辆'
			},
			{
				value: '驾驶员违规',
				text: '驾驶员违规'
			},
			{
				value: '皮带机',
				text: '皮带机'
			},
			{
				value: '粉碎机',
				text: '粉碎机'
			},
			{
				value: '滚轴筛',
				text: '滚轴筛'
			},
			{
				value: '刮板机',
				text: '刮板机'
			},
			{
				value: '给煤机',
				text: '给煤机'
			},
			{
				value: '人员',
				text: '人员'
			},
			{
				value: '筒仓气体',
				text: '筒仓气体'
			},
			{
				value: '水泵',
				text: '水泵'
			},
			{
				value: '供配电',
				text: '供配电'
			},
			{
				value: '润滑站',
				text: '润滑站'
			},
			{
				value: '机房动环',
				text: '机房动环'
			},
			{
				value: '装车站',
				text: '装车站'
			},
			{
				value: '轨道巡检机器人',
				text: '轨道巡检机器人'
			},
			{
				value: '破碎站总控',
				text: '破碎站总控'
			}
		],
		ALERT_LEVEL = ref(''),
		localdata2 = [{
				value: 1,
				text: '1级'
			},
			{
				value: 2,
				text: '2级'
			},
			{
				value: 3,
				text: '3级'
			},
			{
				value: 4,
				text: '4级'
			}
		],
		pageIndex = ref(1),
		total = ref(0),
		listData = ref([]);

	watch([ALERT_TYPE, ALERT_LEVEL, current], () => {
		pageIndex.value = 1;
		listData.value = [];
		fn();
	});


	function fn(type) {
		loading();
		return getByApiCode({
			apiCode: 'qwertytrewsd',
			pageIndex: pageIndex.value,
			pageSize: 20,
			params: [{
					code: 'ALERT_TYPE',
					value: ALERT_TYPE.value
				},
				{
					code: 'ALERT_LEVEL',
					value: ALERT_LEVEL.value
				},
				{
					code: 'ALERT_STATUS',
					value: ['未处理', '处理中', '已处理'][current.value]
				}
			],
			propertyMapping: {
				区域: 'ALERT_REGION',
				告警信息: 'ALERT_MESSAGE',
				告警开始时间: 'ALERT_START_TIME',
				告警状态: 'ALERT_STATUS',
				告警级别: 'ALERT_LEVEL',
				类型: 'ALERT_TYPE',
				编号: 'ID',
				处理措施: 'MEASURE',
				处理人: 'PROCES_NAME',
				处理时间: 'PROCES_TIME',
				归属部门: 'DEPT_NAME',
				处理中人: 'PROCESSING_NAME',
				处理中时间: 'PROCESSING_TIME',
				处理中措施: 'PROCESSING_REASON'
			},
			total: true
		}).then((res) => {
			listData.value.push(...res.data);
			total.value = res.total;
			closeLoading();
		});
	}

	// 滚动到底部加载数据
	function scrolltolower() {
		if (listData.value.length < total.value) {
			pageIndex.value = pageIndex.value + 1;
			fn();
		}
	}

	// 跳转详情
	function detailFn(data) {
		uni.navigateTo({
			url: '/pages/message/detail?data=' +
				JSON.stringify({
					...data,
					current: uni.$store.user.current
				})
		});
	}

	// 初始化查询
	onLoad(() => {
		fn()
	})
</script>

<style lang="scss" scoped>
	:deep() {
		.u-tabs__wrapper__nav__item {
			width: 50%;
			font-weight: 900;
		}
	}

	.u-tabs {
		background: #fff;
	}

	.item {
		margin: 0 10px;
		padding: 10px;
		background: #fff;
		border-radius: 8px;
		background-image: url('@/static/img/header.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: bottom;

		+.item {
			margin-top: 20rpx;
		}

		&-p {
			margin: 8rpx 0;
		}
	}
</style>